<template>
  <div class="nav-wrapper">
    <common-scroll class="nav-list"
                   :data="list"
                   ref="scroll">
      <ul class="nav"
          @click="handleClick"
          ref="list">
        <li v-for="(item, index) of list"
            :key="index"
            :data-index="index"
            class="item"
            border-bottom-1px
            :class="{changeColor: index===currentIndex}">{{item}}</li>
      </ul>
    </common-scroll>
  </div>
</template>

<script>
import CommonScroll from 'common/scroll/Scroll'
import { getData } from '@/assets/js/dom'
export default {
  name: 'ClassifyNav',
  props: {
    list: {
      type: Array
    },
    currentIndex: {
      type: Number
    }
  },
  components: {
    CommonScroll
  },
  methods: {
    handleClick (e) {
      const el = e.target
      const index = getData(el, 'index')
      this.$emit('changeIndex', index)
    }
  },
  watch: {
    currentIndex () {
      this.$refs.scroll.scrollToElement(this.$refs.list[this.currentIndex], 100)
    }
  },
  activated () {
    setTimeout(() => {
      this.$refs.scroll._initalScroll()
    }, 20)
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.nav-list
  height 820px
  width 170px
  top 106px
  z-index 10

.item
  height 90px
  line-height 90px
  width 170px
  background-color $bgcWh
  color $fzColor
  font-size $fzFifth
  text-align center

.changeColor
  background-color $bgHomeTitle
</style>
